<!--
溢出的文字显示省略号

单行（以下三个必须都写上）
    white-space: nowrap;        强制一行，不允许换行（不写的话默认是normal，自动换行）
    overflow: hidden;           溢出部分隐藏
    text-overflow: ellipsis;    有溢出时，才会显示省略号

多行
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;           // 弹性伸缩盒子模型显示
    -webkit-line-clamp: 2;          // 限制在一个块元素显示的文本的行数（在第几行显示省略号）
    -webkit-box-orient: vertical;   // 设置或检索伸缩盒对象的子元素的排列方式
注意：
    1）前端实现多行省略效果，必须精准控制高度，因为在第几行显示省略号是手动设置的
    2）前端实现多行省略效果，存在兼容性问题
        - 只适用于webkit内核的浏览器或移动端（大部分移动端是webkit内核）
        - 最好让后端来实现，因为后端实现不存在兼容性问题
-->
<style>
    /* 单行 */
    .box {
        width: 200px;
        height: 100px;
        background-color: cyan;
        /* ------------ */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        /* ------------ */
    }
    .box2 {
        width: 200px;
        height: 100px;
        background-color: skyblue;
        /* ------------ */
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        /* ------------ */
    }
</style>

<!-- 单行 -->
<div class="box">强制一行不允许换行强制一行不允许换行强制一行不允许换行</div>
<!-- 多行 -->
<div class="box2">多行允许换行多行允许换行多行允许换行多行允许换行多行允许换行</div>